<template>
  <div class="my_header">
    <!-- 左侧 -->
    <div class="header_left">
      <van-icon name="wap-nav" size="22px" />
    </div>
    <!-- 中间导航 -->
    <div class="header_content">
      <div :class="{ active: currentTab === 1 }" @click="setCurrentTab(1)">
        我的
      </div>
      <div :class="{ active: currentTab === 2 }" @click="setCurrentTab(2)">
        发现
      </div>
      <div :class="{ active: currentTab === 3 }" @click="setCurrentTab(3)">
        云村
      </div>
      <div :class="{ active: currentTab === 4 }" @click="setCurrentTab(4)">
        视频
      </div>
    </div>
    <!-- 右侧 -->
    <div class="header_right">
      <van-icon name="search" size="22px" />
    </div>
  </div>
</template>
<script setup>
import router from "@/router";
import { ref } from "vue";
const currentTab = ref(2);
const setCurrentTab = (tab) => {
  currentTab.value = tab;

  router.push({
    name:
      tab === 1 ? "mine" : tab === 2 ? "discovery" : tab === 3 ? "home" : "video",
  });
};
</script>
<style scoped>
.my_header {
  display: flex;
  justify-content: space-between;
}
.header_content {
  display: flex;
  justify-content: space-around;
  width: 200px;
}
</style>